<template>
	<view class="my-mainPage-navbar-wrap">
		<view class="title" :style="titleStyle">{{ name }}</view>
		<my-button @click="clickHandel" v-if="isButton">
			<view class="btn-content">
				<text :class="['icon','iconfont', iconStr, 'defaultIcon']"></text>
			</view>
		</my-button>
		<view v-else :class="['icon iconfont', iconStr, 'defaultWranIcon']" :style="iconStyle"> </view>
	</view>
</template>

<script>
	export default{
		props:{
			title:{
				type: String,
				default: '',
			},
			icon:{
				type: String,
				default: '',
			},
			
			customIcon:{
				type: Object,
				default: null,
			},
			
			rightButton:{
				type: Boolean,
				default: null,
			},
			
			customText:{
				type: Object,
				default: null,
			}
		},
		watch:{
			title(n, o){
				this.name = n;
			},
			icon(n, o){
				this.iconStr = n;
			},
			customIcon(n, o){
				this.iconStyle = n;
			},
			rightButton(n, o){
				this.isButton = n;
			},
			
			customText(n, o){
				this.titleStyle = n;
			}
		},
		data(){
			return{
				name: this.title,
				iconStr: this.icon,
				iconStyle: this.customIcon ? this.customIcon : null,
				titleStyle: this.customText ? this.customText : null,
				isButton: this.rightButton == false ? this.rightButton : true
			}
		},
		methods:{
			clickHandel(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.my-mainPage-navbar-wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	.title{
		font-size: 54rpx;
		color: $my-app-primary-color;
	}
	.btn-content{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 12rpx 22rpx;
		.defaultIcon{
			font-size: 28rpx;
			color: $my-app-primary-color;
		}	
	}
	
	.defaultWranIcon{
		font-size: 28rpx;
		color: $my-app-warning-color;
	}
	
}
</style>
